/*
  react类组件中，父组件想要获取子组件的数据或方法

1.父组件index中挂载子组件时：
  <FilterForm onRef={ ref => this.formRef = ref} {...formProps} />
2.子组件FilterForm中：
  constructor(props) {
    super(props);
    props.onRef(this);  
  }
这样，父组件的this.formRef就是子组件的this，自然可以拿到子组件的数据或调子组件的方法

路径：D:\project\欧普\opple-front\packages\opple-front-common\src\components\AssemblyCommon\AssemblyList
*/


/*
  react函数组件中，父组件想要获取子组件的数据或方法
  
1.子组件接收父组件参数时，其他props(canEdit, kid, columns)为参数1，ref参数2
2.父组件通过childRef.current获取子组件暴露出的对象

路径： D:\project\欧普\opple-front\packages\hlct-front\src\routes\hmes\Area\AreaDetail
*/

// 父组件
export default AreaDetail = () => {
  const childRef = useRef(); //声明childRef
// 关键点：通过childRef.current获取子组件暴露出的对象
  const handleSave = async () => {
    const { success, newKid } = await childRef.current.submit();
    if (success) {
      setCanEdit((prev) => !prev);
      props.history.push(`/hmes/organization-modeling/area/dist/${newKid}`);
    }
  };
  return (
    <div className="hmes-style">
      <Content>
        {/* 传递 */}
        <Detail canEdit={canEdit} kid={areaId} columns={3} ref={childRef}/> 
      </Content>
    </div>
  );
};

/*
  子组件：useImperativeHandle参数1为转发的ref，参数2为暴露给父组件的数据或方法对象
*/
import React, { useImperativeHandle, forwardRef } from 'react';
const Detail = forwardRef((props, ref) => {
  const { canEdit, kid, columns = 1 } = props;

  useImperativeHandle(ref, () => ({
    // 暴露给父组件的方法
    submit: async () => {

    },
    reset: () => {

    },
  }));

  return (
    <>
 
    </>
  );
});
